<template>
    <div>
        {{skuInfo}}
        <el-form :model="skuInfo" label-width="120px">
             <!--基本表单-->
            <el-form-item label="spu名称">
                <span>{{ spuName }} </span>
            </el-form-item>

            <el-form-item label="sku名称">
                <el-input v-model="skuInfo.skuName"/>
            </el-form-item>

            <el-form-item label="商品价格">
                <el-input v-model="skuInfo.price"/>
            </el-form-item>
            <el-form-item label="商品品牌">
                {{skuInfo.tmName}}
            </el-form-item>

            <el-form-item label="商品重量（千克)">
                <el-input v-model="skuInfo.weight"/>
            </el-form-item>

            <el-form-item label="商品规格描述">
                <el-input v-model="skuInfo.skuDesc" :rows="5" type="textarea"/>
            </el-form-item>
            
        </el-form>

        {{attrIdAttrValueIdList}}
        <el-divider></el-divider>

        <el-form label-width="120px">
            <el-form-item v-for="(attr,attrIndex) in attrValueList" :label="attr.attrName"
                :key="attr.id">
                <el-select v-model="attrIdAttrValueIdList[attrIndex]" placeholder="请选择">
                    <el-option
                    v-for="item in attr.attrValueList"
                    :key="item.id"
                    :label="item.valueName"
                    :value="item.id">
                    </el-option>
                </el-select>
                
            </el-form-item>
        </el-form>
        


        <!--按钮-->
        <div style="margin-top:22px;">
            <el-button type="primary" size="mini" @click="saveSkuInfo()">保存</el-button>
            <el-button type="default" size="mini" @click="backToSpuList()">返回</el-button>
        </div>
    </div>
</template>

<script>
import * as categoryTrademarkApi from '../../../api/gmall/product/categoryTrademark'
import * as spuApi from '../../../api/gmall/product/spu'
import * as attrApi from '../../../api/gmall/product/attr'
export default {
    data(){
        return{
            attrIdAttrValueIdList:[],
            spuName:'',
            category1Id:0,
            category2Id:0,
            category3Id:0,
            skuInfo:{
                spuId: 6,
                price: 1399.00,
                skuName: "",
                skuDesc: null,
                weight: "",
                tmId: 1,
                tmName:'',
                category3Id: 0,
                category3Name:'',
                skuDefaultImg: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
                isSale: 1,

            },
            attrValueList:[]
        }
    },
    methods:{
        init(spuId,spuName,tmId,tmName,category1Id,category2Id,category3Id){
            this.skuInfo.spuId = spuId;
            this.spuName = spuName;
            this.skuInfo.tmId = tmId;
            this.skuInfo.tmName = tmName;
            this.skuInfo.category3Id = category3Id;
            this.category1Id = category1Id;
            this.category2Id = category2Id;
            this.category3Id = category3Id;

            attrApi.attrInfoList(1,100,category1Id,category2Id,category3Id).then(res=>{
                if(res.data.ok){
                    this.attrValueList = res.data.data.records;
                }
            })

        },
        saveSkuInfo(){

        },
        backToSpuList(){
            this.$emit("backToSpuList")
        }
    },
    mounted(){

    }
}
</script>

